<template>
	<view class="content">
		<!-- 顶部导航 -->
		<view class="head_box u-flex">
			<view class="head_nav u-flex-1" :class="{'act_head_nav' : tab == 1}" @click="chooseHead(1)">待审核</view>
            <view class="head_nav u-flex-1" :class="{'act_head_nav' : tab == 2}" @click="chooseHead(2)">已审核</view>
		</view>
		<!-- 导航 -->
        <!-- 1报备 2到访 3认购 4待结佣 5已结佣 6退户 7认证 -->
		<view class="nav_box u-flex" v-if="isShow">
			<view class="nav u-flex-1" :class="{'act_nav' : type == 1}" @click="chooseNav(1)">
				<view class="nav_tit">报备</view>
				<view class="nav_tit">({{count.count1}})</view>
			</view>
			<view class="nav u-flex-1" :class="{'act_nav' : type == 2}" @click="chooseNav(2)">
				<view class="nav_tit">到访</view>
				<view class="nav_tit">({{count.count2}})</view>
			</view>
			<view class="nav u-flex-1" :class="{'act_nav' : type == 3}" @click="chooseNav(3)">
				<view class="nav_tit">认购</view>
				<view class="nav_tit">({{count.count3}})</view>
			</view>
			<view class="nav u-flex-1" :class="{'act_nav' : type == 4}" @click="chooseNav(4)" v-if="tab == 1">
				<view class="nav_tit">待结佣</view>
				<view class="nav_tit">({{count.count4}})</view>
			</view>
            <view class="nav u-flex-1" :class="{'act_nav' : type == 5}" @click="chooseNav(5)" v-if="tab == 2">
            	<view class="nav_tit">已结佣</view>
            	<view class="nav_tit">({{count.count5}})</view>
            </view>
            <!-- <view class="nav u-flex-1" :class="{'act_nav' : type == 6}" @click="chooseNav(6)">
            	<view class="nav_tit">退户</view>
            	<view class="nav_tit">({{count.count6}})</view>
            </view> -->
			<view class="nav u-flex-1" :class="{'act_nav' : type == 7}" @click="chooseNav(7)">
				<view class="nav_tit">认证人员</view>
				<view class="nav_tit">({{count.count7}})</view>
			</view>
		</view>
		
		<view class="con_box" v-if="isShow">
            <view class="u-p-b-20">
                <u-search bg-color="#fff" :show-action="false" v-model="keyword" shape="round" placeholder="请输入内容" @search="doSearch"></u-search>
            </view>
			
			<view class="list_box" v-for="(item,index) in list" :key="index" @click="toPage(item)">
				<view class="list_tit">
					{{ type == 7 ? '经纪人姓名' : '客户姓名' }}：{{item.name || item.user_name}}
				</view>
                <view class="list_tit" v-if="type != 7">
                	客户性别：{{ item.gender == 1 ? '男' : '女' }}
                </view>
                
                <view class="list_tit">
                	手机号：{{ item.phone }}
                </view>
                <!-- <view class="list_tit" v-if="type != 7 && item.phone">
                	手机号：{{ item.phone.substring(0, 3)+"****"+item.phone.substring(7) }}
                </view> -->
                
				<view class="list_tit" v-if="item.id_number">
					身份证号：{{item.id_number}}
				</view>
                
                <template v-if="type != 7">
                    <view class="list_tit">
                    	楼盘名称：{{item.pro_name}}
                    </view>
                    <view class="list_tit">
                    	报备人员：{{item.broker_name}}
                    </view>
                    <view class="list_tit">
                    	报备时间：{{item.report_time}}
                    </view>
                </template>
                
                <template v-if="type == 7">
                    <view class="list_tit">
                    	机构邀请码：{{item.code}}
                    </view>
                    <view class="list_tit">
                    	门店：{{item.stores}}
                    </view>
                </template>
				<template v-if="tab == 1">
                    <!-- 报备、到访、认购，管理员不能审核。 结佣和退户只有管理员能确认（不需要审核） -->
                    <view class="u-flex u-row-right" v-if="type == 7">
                    	<view class="btn1" @click="doReject(item)">驳回报备</view>
                    	<view class="btn2" @click="doExamine(item, 2)">通过报备</view>
                    </view>
                    <view class="u-flex u-row-right" v-if="type == 4">
                        <view class="btn1" @click="doExamine(item, 2)">退户</view>
                    	<view class="btn2" @click="doExamine(item, 2)">确认</view>
                    </view>
                </template>
			</view>
		</view>
        
        <view style="height: 94rpx;padding-top: 30rpx;">
            <u-loadmore :status="status" v-if="status != 'loadmore'" />
        </view>
        
        <!-- 驳回原因弹窗 -->
        <u-mask :show="show" mode="center" border-radius="14">
            <view class="popup">
                <view class="win-box2">
                    <view class="pop-cen">
                        <view class="pop-tit">驳回原因</view>
                        <textarea v-model="content" placeholder="请输入驳回原因"></textarea>
                    </view>
                    <view class="pop-btn">
                        <view @click="show = false">取消</view>
                        <view @click="doExamine('', 3)">确认</view>
                    </view>
                </view>
            </view>
        </u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
                tab: 1,
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
                keyword: '',
                count: {},
                isShow: false,
                show: false,
                content: '',
                item: {},
			}
		},
        onShow() {
            this.page = 1
            this.list = []
            this.status = 'loadmore'
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
		methods: {
            // 驳回
            doReject(item) {
                this.item = item
                this.show = true
            },
            
            // 审核 4待结佣 7认证
            doExamine(item, num) {
                var tt = ''
                if (this.type == 4) {
                    tt = 5
                } else {
                    tt = this.type
                }
                this.$ajax('reporting_examine', {
                    user_token: this.$getSync('userToken'),
                    id: num == 2 ? item.id : this.item.id, //报备id
                    status: tt,//1报备 2到访 3认购 4认购信息 5结佣 6退户 7认证
                    examine: num,//2通过 3驳回
                    reason: this.content,//驳回原因
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.show = false
                        this.$toast('提交成功');
                        setTimeout(() => {
                            this.content = ''
                            this.$backT()
                        }, 500)
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            toPage(item) {
                if (this.type == 3 && item.examine == 2) {
                    // 已认证
                    // this.$gTo('/pages/kehu/subscribe-list?id='+ item.id + '&role=7')
                    this.$gTo('/pages/kehu/details-3?type=3' + '&id=' + item.id + '&role=7')
                } else {
                    // 未认证
                    this.$gTo('/admin/pages/auditManagement/details?id=' + item.id + '&type=' + this.type + '&tab=' + this.tab + '&role=7')
                }
            },
            
			chooseHead(num) {
                if (this.tab == num) return
                this.tab = num
                this.doSearch()
            },
            chooseNav(num) {
                if (this.type == num) return
                this.type = num
                this.doSearch()
            },
            
            doSearch() {
                this.page = 1
                this.list = []
                this.status = 'loadmore'
                this.getList()
            },
            
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('reporting_list', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
                    type: this.tab == 1 ? 3 : 4,//1客户报备 2项目报备 3待审核 4已审核
                    status: this.type,//1报备 2到访 3认购 4待结佣 5已结佣 6退户 7认证
                    name: this.keyword,//搜索
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.count = ret.detail
            			if (ret.detail && ret.detail.data && ret.detail.data.length > 0) {
            				this.list = this.list.concat(ret.detail.data);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
                        this.isShow = true
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
		}
	}
</script>
<style>
	page{background-color: #f5f5f5!important;}
</style>
<style scoped>
.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		border-top: 2rpx solid #ebebeb;
	}
.head_box{
	width: 100%;
	padding: 20rpx 20rpx 0;
	background-color: #fff;
}
.head_nav{
	height: 70rpx;
	font-size: 28rpx;
	line-height: 70rpx;
	color: #000000;
	text-align: center;
	background-color: #f5f5f5;
	margin-right: 20rpx;
}
.head_nav:nth-child(2){
	margin-right: 0;
}
.act_head_nav{
	color: #fff;
	background-color: #00a1e9;
}
.nav_box{
	width: 100%;
	height: 120rpx;
	background-color: #fff;
	padding-top: 30rpx;
}
.nav{
	height: 100%;
	color: #000000;
	border-bottom: 3rpx solid #fff;
}
.act_nav{
	color: #00a1e9;
	border-bottom: 3rpx solid #00a1e9;
}
.nav_tit{
	font-size: 26rpx;
	line-height: 34rpx;
	text-align: center;
}
.con_box{
	width: 100%;
	padding: 20rpx 20rpx 50rpx;
}
.search_box{
	width: 100%;
	height: 66rpx;
	border-radius: 33rpx;
	box-shadow: 0 0 2rpx #e3e3e3;
	background-color: #fff;
	padding: 0 28rpx;
	margin-bottom: 20rpx;
}
.s_icon{
	width: 27rpx;
	height: 27rpx;
	margin-right: 14rpx;
}
.s_input{
	flex: 1;
	height: 66rpx;
	font-size: 26rpx;
	line-height: 66rpx;
	color: #000;
}
.list_box{
	width: 100%;
	border-radius: 18rpx;
	box-shadow: 0 0 2rpx #e3e3e3;
	padding: 36rpx 30rpx 20rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
}
.list_tit{
	font-size: 24rpx;
	/* line-height: 26rpx; */
	color: #1a1a1a;
	padding-bottom: 10rpx;
}
.btn1{
	width: 160rpx;
	height: 58rpx;
	border-radius: 26rpx;
	font-size: 26rpx;
	line-height: 58rpx;
	color: #4c4c4c;
	text-align: center;
	background-color: #f0f0f0;
	margin-right: 14rpx;
}

.btn2{
	width: 160rpx;
	height: 58rpx;
	border-radius: 26rpx;
	font-size: 26rpx;
	line-height: 58rpx;
	color: #fff;
	text-align: center;
	background-color: #00a1e9;
}

</style>
